<template>
    <div class="home-container">
        <!-- 侧边栏导航 -->
        <el-menu mode="vertical" :default-active="activeMenu" @select="handleMenuSelect" style="width: 200px">
            <el-menu-item index="/">
                <template #title>首页</template>
            </el-menu-item>
            <el-menu-item index="/menu-management">
                <template #title>菜单管理</template>
            </el-menu-item>
            <el-sub-menu index="user-management">
                <template #title>用户管理</template>
                <el-menu-item index="/user-management/department">
                    <template #title>部门管理</template>
                </el-menu-item>
                <el-menu-item index="/user-management/user">
                    <template #title>账号管理</template>
                </el-menu-item>
                <el-menu-item index="/user-management/role">
                    <template #title>角色管理</template>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/data-statistics">
                <template #title>数据统计</template>
            </el-menu-item>
            <el-menu-item index="/file-management">
                <template #title>文件管理</template>
            </el-menu-item>
            <el-menu-item index="/settings">
                <template #title>设置</template>
            </el-menu-item>
        </el-menu>
        <!-- 主内容区域 -->
        <div class="main-content">
            <el-card>
                <template #header>
                    <div class="header">
                        <h1>欢迎来到后台管理系统！</h1>
                        <el-button @click="handleLogout">退出登录</el-button>
                    </div>
                </template>
                <div class="content">
                    <router-view></router-view>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const activeMenu = ref('/');

const handleMenuSelect = (index: string) => {
    router.push(index);
};

const handleLogout = () => {
    localStorage.removeItem('isLogin');
    localStorage.removeItem('user');
    localStorage.removeItem('password');
    router.push('/login');
};
</script>

<style scoped lang="scss">
.home-container {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    /* 让主内容区域占据剩余空间 */
    // padding: 20px;
    display: flex;
    /* 使用 flex 布局 */
    flex-direction: column;
    /* 垂直方向排列 */
}

.el-card {
    flex: 1;
    /* 让卡片占据主内容区域的剩余空间 */
    display: flex;
    /* 使用 flex 布局 */
    flex-direction: column;
    /* 垂直方向排列 */
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content {
    flex: 1;
    /* 让 content 区域占据卡片的剩余空间 */
    overflow: auto;
    /* 如果内容超出，显示滚动条 */
}
</style>